<template>
  <div class="WordWorld">
    <Word>
      
      <span>11</span>
    </Word>

    <Word>
      <span>11</span>
    </Word>

    <Word>
      <span>11</span>
    </Word>

    <Word>
      <span>11</span>
    </Word>
    
    
  </div>
</template>

<script>
import PubSub from 'pubsub-js';
import { reactive } from 'vue';

import Word from './Word.vue';

export default {
  name: 'WordWorld',
  components:{Word},
  setup(){

    let wordList = reactive([])

    // 接收更新后的单词列表
    PubSub.subscribe('sendWordList',(msgName,data)=>{
      wordList.length = 0

      data.forEach(element => {

        wordList.push(element)
      });
    })

    return{
      wordList
    }
    
  }
  
}
</script>


<style scoped>
  .WordWorld{
    border: 1px solid gray;
    height: 80%;
  }
  img{
    height: 20px;
    width:auto;

  }

</style>
